<template>
	<div id="BingZhuangTu03"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Pie } from '@antv/g2plot'

const data = [
	{ value: 100, type: '水基岩屑' },
	{ value: 50, type: '油基岩屑' },
	{ value: 30, type: '含油污泥' },
	{ value: 10, type: '废机油' },
	{ value: 15, type: '返排液' }
]

onMounted(() => {
	const piePlot = new Pie('BingZhuangTu03', {
		appendPadding: 10,
		data,
		angleField: 'value',
		colorField: 'type',
		radius: 1,
		innerRadius: 0.6,
		label: {
			type: 'inner',
			offset: '-50%',
			content: '{value}',
			style: {
				textAlign: 'center',
				fontSize: 12
			},
			minColumnWidth: 20,
			maxColumnWidth: 20,
		},
		interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
		statistic: {
			title: false,
			content: {
				style: {
					whiteSpace: 'pre-wrap',
					overflow: 'hidden',
					textOverflow: 'ellipsis'
				},
				//content: 'AntV\nG2Plot'
				content: ''
			}
		}
	})

	piePlot.render()
})
</script>
